<template>
  <div class="wraper" height="fill">
    <div class="top-box">
      <div class="left-box card-box">
        <div class="undline">医院数据</div>
        <div class="search-box" style="flex-direction: column">
          <FilterForm
            ref="gxForm"
            :elements="hospitalElement"
            @submit="handleHospitalSearch"
            @reset="handleHospitalReset"
          >
            <Button type="plain" :btn-loading="gxLoading" @click="handleUpdataData">更新数据</Button>
          </FilterForm>
        </div>
        <div class="table-box">
          <Table
            :selection="true"
            :columns="tableLColumns"
            :loading="tableLLoading"
            :data="tableLData"
            :hide-pagination="true"
            @rowSelection="handleSelection"
          />
        </div>
      </div>
      <div class="middle-box">
        <div class="m-btn">
          <!-- <Button
            type="hollow"
            icon="icon-xiazai"
            :btn-loading="xzLoading"
            @click="handleDealExcel(1)"
          >下载模板</Button>
          <Button type="hollow" icon="icon-daoru" @click="handleDealExcel(2)">导入字典</Button>
          <input v-show="false" ref="inputRef" type="file" @change="handlechange">
          <el-upload
            ref="upload"
            style="display:inline-block;"
            :show-file-list="false"
            :on-change="handlechange"
            class="upload-demo"
            action
            :auto-upload="false"
          >
            <Button type="hollow" icon="icon-daoru" :btn-loading="drLoading">导入字典</Button>
          </el-upload>

          <Button
            type="hollow"
            icon="icon-daochu1"
            :btn-loading="dcLoading"
            @click="handleDealExcel(3)"
          >导出字典</Button> -->
          <Button icon="icon-a-ziyuan1" :btn-loading="plLoading" @click="handleDealExcel(4)">批量对照</Button>
          <Button icon="icon-a-ziyuan3" :btn-loading="qrLoading" @click="handleDealExcel(5)">确认对照</Button>
        </div>
      </div>
      <div class="right-box card-box">
        <div class="undline">系统数据</div>
        <div class="search-box" style="flex-direction: column">
          <FilterForm
            ref="filterForm"
            :elements="SystermElement"
            @submit="handleSystermSearch"
            @reset="handleSystermReset"
          />
        </div>
        <div class="table-box systerm-box">
          <Table
            ref="systermRef"
            :selection="true"
            :columns="tableRColumns"
            :loading="tableRLoading"
            :data="tableRData"
            :hide-pagination="true"
            @rowSelect="handleSystermSelection"
          />
        </div>
      </div>
    </div>
    <div class="bottom-box card-box">
      <div class="search-box">
        <FilterForm
          ref="filterForm"
          :elements="comparisonElement"
          @submit="handleComparisonSearch"
          @reset="handleComparisonReset"
        />
      </div>
      <div class="table-box">
        <Table
          :columns="tableBtmColumns"
          :loading="tableBtmLoading"
          :data="tableBtmData"
          :pagination="{
            total: totalBtm,
            current: currentBtmPage,
            pageSize: pageBtmSize,
          }"
          @paginationChange="pageChange"
        >
          <template #caozuo="{ row }">
            <Tooltip content="撤销" icon="icon-chehui" @click="handleRevoke(row)" />
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listHospitalDataByPage,
  listAccountingDataByPage,
  listSysBindByPage,
  getExport,
  getImportExcel,
  batchComparison,
  updateSysBind,
  revokeSysBind
} from '@/api/departmentControl'
export default {
  name: 'DepartmentComparsion', // 数据对照-科室对照
  components: {},
  props: {},
  data() {
    return {
      drLoading: false,
      xzLoading: false,
      dcLoading: false,
      qrLoading: false,
      plLoading: false,
      comparisonElement: [
        {
          label: '',
          type: 'input',
          key: 'name',
          placeholder: '请输入名称',
          value: ''
        }
      ],
      SystermElement: [
        {
          label: '',
          type: 'input',
          key: 'name',
          placeholder: '请输入名称',
          value: ''
        }
      ],
      hospitalElement: [
        {
          key: 'dataSource',
          label: '数据来源',
          type: 'select',
          hideSelectAll: true,
          options: [
            {
              label: 'HIS',
              value: 'HIS'
            }
            // {
            //   label: '护理管理系统',
            //   value: '护理管理系统'
            // }
            // {
            //   label: '财务系统',
            //   value: '财务系统'
            // }
          ],
          value: 'HIS'
        },
        {
          label: '',
          type: 'input',
          key: 'name',
          value: '',
          placeholder: '请输入名称'
        }
      ],
      tableRLoading: false,
      tableRData: [],
      dataSourceOption: [],
      tableLLoading: false,
      tableLData: [],
      tableLColumns: [
        {
          title: '科室编码',
          dataIndex: 'hospitalDeptCode'
        },
        {
          title: '科室名称',
          dataIndex: 'hospitalDeptName'
        },
        {
          title: '数据来源',
          dataIndex: 'hospitalDeptSource'
        }
      ],
      bSearchVal: '',
      tableBtmColumns: [
        {
          title: '医院科室名称',
          dataIndex: 'hospitalDeptName'
        },
        {
          title: '医院科室编码',
          dataIndex: 'hospitalDeptCode'
        },
        {
          title: '数据来源',
          dataIndex: 'hospitalDeptSource'
        },
        {
          title: '系统科室编码',
          dataIndex: 'sysDeptCode'
        },
        {
          title: '系统科室名称',
          dataIndex: 'sysDeptName'
        },
        {
          title: '数据来源',
          dataIndex: 'sysDeptSource'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag',
          width: 120
        }
      ],
      tableRColumns: [
        {
          title: '科室编码',
          dataIndex: 'sysDeptCode'
        },
        {
          title: '科室名称',
          dataIndex: 'sysDeptName'
        },
        {
          title: '数据来源',
          dataIndex: 'sysDeptSource'
        }
      ],
      tableBtmLoading: false,
      tableBtmData: [],
      totalBtm: 0,
      pageBtmSize: 10,
      currentBtmPage: 1,
      tableColumns: [],
      total: 0,
      pageSize: 100,
      currentPage: 1,
      totalR: 0,
      currentRPage: 1,
      pageRSize: 10,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      list: [],
      newRCondition: {},
      newBtmCondition: {},
      leftSelections: [],
      rightSelections: [],
      gxLoading: false
    }
  },
  created() {},
  methods: {
    // 系统数据选择
    handleSystermSelection([selection, row]) {
      this.$refs.systermRef.tableSelect(selection, row)
      if (selection.length === 0) {
        // 判断selection是否有值存在
        this.rightSelections = []
        return
      }
      if (row) {
        this.rightSelections = [row]
      }
    },
    // 医院数据选择
    handleSelection(row) {
      this.leftSelections = row
    },
    // 已对照的数据查询
    handleComparisonSearch(value) {
      this.newBtmCondition = value
      this.getComparisonData()
    },
    // 已对照的数据重置
    handleComparisonReset(val) {
      this.handleComparisonSearch(val)
    },
    // 系统数据查询
    handleSystermSearch(value) {
      this.newRCondition = value
      this.getSystermData()
    },
    // 系统数据重置
    handleSystermReset(val) {
      this.handleSystermSearch(val)
    },
    // 医院数据查询
    handleHospitalSearch(value) {
      this.newCondition = value
      this.getHospitalData()
    },
    // 医院数据重置
    handleHospitalReset(val) {
      this.handleHospitalSearch(val)
    },
    // 更新数据
    handleUpdataData() {
      // this.gxLoading = true
      // updateSJDZSysBind({
      //   hospitalDeptSource: this.$refs.gxForm.getParms()?.dataSource
      // })
      //   .then(res => {
      //     this.gxLoading = false
      //     if (res.code === 200) {
      //       this.getHospitalData()
      //     } else {
      //       this.$message.error(res.msg)
      //     }
      //   })
      //   .catch(() => {
      //     this.gxLoading = false
      //   })
    },
    // 医院数据
    getHospitalData() {
      const params = {
        dataSource: this.newCondition?.dataSource,
        name: this.newCondition?.name
      }
      this.tableLLoading = true
      listHospitalDataByPage(params)
        .then(res => {
          this.tableLLoading = false
          if (res.code === 200) {
            this.tableLData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableLLoading = false
        })
    },
    // 系统数据
    getSystermData() {
      const params = {
        name: this.newRCondition?.name
        // pageNum: this.currentRPage,
        // pageSize: this.pageRSize
      }
      this.tableRLoading = true
      listAccountingDataByPage(params)
        .then(res => {
          this.tableRLoading = false
          if (res.code === 200) {
            this.tableRData = res.data
            this.totalR = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableRLoading = false
        })
    },
    // 已对照数据
    getComparisonData() {
      const params = {
        name: this.newBtmCondition?.name,
        pageNum: this.currentBtmPage,
        pageSize: this.pageBtmSize
      }
      this.tableBtmLoading = true
      listSysBindByPage(params)
        .then(res => {
          this.tableBtmLoading = false
          if (res.code === 200) {
            this.tableBtmData = res.data.records
            this.totalBtm = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableBtmLoading = false
        })
    },

    // 导入
    handlechange(file, fileList) {
      // 导入
      const fileType = file.name.substr(file.name.lastIndexOf('.')).trim()
      if (fileType !== '.xlsx' && fileType !== '.xls') {
        this.$message.warning('请选择Excel格式的文件导入！')
        return
      }
      const formData = new FormData()
      formData.append('file', file.raw)
      this.drLoading = true
      getImportExcel(formData).then(res => {
        const blob = new Blob([res])
        console.log('blob', blob)
        this.drLoading = false
        if (blob.size === 0) {
          this.getHospitalData()
          this.$message.success('导入成功')
        } else {
          this.$utils.downloadFileFun(res, '医院数据.xls')
        }
      })
    },
    // 撤销
    handleRevoke(row) {
      this.$ckConfirm({
        content: '撤销即解除对照关系，是否继续？',
        title: '提示',
        okFn: res => {
          revokeSysBind({
            id: row.id
          }).then(res => {
            if (res.code === 200) {
              this.getComparisonData()
              // this.getHospitalData()
              // this.getSystermData()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    handleDealExcel(type) {
      if (type === 1) {
        this.xzLoading = true
        getExport({
          type: 0
          // ids: this.leftSelections.map(item => item.id)
        }).then(res => {
          this.xzLoading = false
          this.$utils.downloadFileFun(res, '医院数据.xls')
        })
      } else if (type === 2) {
        // 导入字典
        this.$refs.inputRef.click()
      } else if (type === 3) {
        // 导出字典
        if (this.leftSelections.length === 0) {
          this.$message.warning('请选择要导出的医院数据')
          return
        }
        const params = {
          ids: this.leftSelections.map(item => item.id),
          type: 1
        }
        this.dcLoading = true
        getExport(params).then(res => {
          this.dcLoading = false
          this.$utils.downloadFileFun(res, '医院数据.xls')
        })
      } else if (type === 4) {
        // 批量对照
        this.plLoading = true
        batchComparison().then(res => {
          this.plLoading = false
          if (res.code === 200) {
            this.getComparisonData()
            this.getHospitalData()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        // 确认对照
        if (this.leftSelections.length === 0) {
          this.$message.warning('请选择医院数据')
          return
        }
        if (this.rightSelections.length === 0) {
          this.$message.warning('请选择系统数据')
          return
        }
        const param = {
          hospitalDataVOList: this.leftSelections,
          sysDeptCode: this.rightSelections[0]?.sysDeptCode,
          sysDeptName: this.rightSelections[0]?.sysDeptName,
          sysDeptSource: this.rightSelections[0]?.sysDeptSource
        }
        this.qrLoading = true
        updateSysBind(param).then(res => {
          this.qrLoading = false
          if (res.code === 200) {
            this.getComparisonData()
            this.getHospitalData()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    handleLSearch() {},
    // getData() {
    //   this.tableLoading = true
    //   const params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     wardCode: this.newCondition.wardCode || null,
    //     year: this.newCondition.year
    //   }
    //   // listTurnoverRateByPage(params).then((res) => {
    //   //   this.tableLoading = false
    //   //   if (res.data.code === 200) {
    //   //     this.tableData = res.data.data.records
    //   //     this.total = res.data.data.total
    //   //   } else {
    //   //     this.$message.error(res.data.message)
    //   //   }
    //   // }).catch(() => {
    //   //   this.tableLoading = false
    //   // })
    // },
    pageSystermChange(payload) {
      this.currentRPage = payload.current
      this.pageRSize = payload.pageSize
      this.getSystermData()
    },
    // 已对照数据分页
    pageChange(payload) {
      this.currentBtmPage = payload.current
      this.pageBtmSize = payload.pageSize
      this.getComparisonData()
    }
  }
}
</script>

<style lang="less" scoped>
.wraper {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 360px;
  background: transparent !important;
  gap: 10px 0px;
  overflow: hidden;
  padding: 0px !important;
  // 全选框隐藏
  .systerm-box/deep/.el-table__header .el-checkbox {
    display: none !important;
  }

  .top-box,
  .bottom-box {
    padding: 8px;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .top-box {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    .left-box,
    .right-box {
      border: 1px solid #e7ecf8;
      padding: 5px 10px 10px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .middle-box {
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid red;
      .m-btn {
        display: grid;
        // grid-template-rows: repeat(5, auto);
        gap: 15px 0px;
        // border: 1px solid red;
      }
    }
  }
  .card-box {
    display: flex;
    flex-direction: column;
    .undline {
      height: 30px;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-weight: 700;
      &::before {
        content: '';
        height: 15px;
        border-right: 2px solid #217dfa;
        margin-right: 10px;
      }
    }
    .search-box {
      display: flex;
      margin-bottom: 15px;
    }
    .table-box {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
  }
}
</style>
